<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>本例用于测试background-attachment属性</title>
<style type="text/css">
body{
	background-image:url(images/eg_bg_03.gif);
	background-repeat:repeat-x;
	background-attachment:fixed;
	height:5000px;
}
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}

.bgc{
float:left;
width:200px;
height:100px;
margin:20px;
padding:10px;
border:2px fuchsia solid;
	}
.mgd{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px fuchsia solid;
	overflow:auto;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px green solid;
	overflow:auto;
	background-image:url('images/eg_bg_07.gif');
	background-repeat:no-repeat;
}
#bg1{
	background-attachment:fixed;
}
#bg2{
	background-attachment:scroll;
}
#bg3{
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background-attachment属性</div>
</div>
<div id="body2">
	<div id="bg1">
    	<p>默认值。背景图像会随着页面其余部分的滚动而移动。</p>
    	<p>01</p>
        <p>02</p>
        <p>03</p>
        <p>04</p>
        <p>05</p>
        <p>06</p>
        <p>07</p>
        <p>08</p>
        <p>09</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
    </div>
	<div id="bg2">
    	<p>当页面的其余部分滚动时，背景图像不会移动。</p>
    	<p>01</p>
        <p>02</p>
        <p>03</p>
        <p>04</p>
        <p>05</p>
        <p>06</p>
        <p>07</p>
        <p>08</p>
        <p>09</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
    </div>
    <div id="bg3">
    	<p>规定应该从父元素继承 background-attachment 属性的设置。</p>
        <p>01</p>
        <p>02</p>
        <p>03</p>
        <p>04</p>
        <p>05</p>
        <p>06</p>
        <p>07</p>
        <p>08</p>
        <p>09</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
    </div>
</div>
<div>
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。<br/>
故属性 "inherit"应避免使用<br/>
background-attachment主要应用在body上。
</div>
</body>
</html>